<template>
	<view class="zone">
		<u-navbar :is-back="false" :height="60" :background="background" :border-bottom="false">
			<view class="slot-wrap">
				<view class="nav-bar2">
					<u-icon class="back" size="20px" color="#fff" @click="$p.back()" name="arrow-left"></u-icon>
					<view class="n_left">
						 <text @click="$p.navto('/pages/invitebox/luckylog')">提升记录</text>
					</view>
				</view>
			</view>
		</u-navbar>

		<view class="main">

			<view class="titimg">
				<image src="http://img.cpgm.cc/panda/static/lucky/ltit.png" mode="widthFix" />
				<p>幸运值越高，刷副本、开宝箱掉落,高级物品几率越大</p>
			</view>

			<view class="topbox">
				<view class="word">
					<text>{{userinfo.lucky}}</text>
					<text>当前幸运值</text>
				</view>
				<image src="http://img.cpgm.cc/panda/static/lucky/lucky.png" mode="widthFix" />
			</view>
			

			<view class="botbox">
				<view class="title">您要提升多少幸运值？</view>
				<view class="line"></view>
				<view class="tab">
					<view class="option" :class="[stat == item.id?'active':'']" v-for="(item,index) in tablist" :key="index" @click="change(item.id)"> 
						<text> <span>{{item.num}}</span> 幸运值</text>
						<text>需消耗{{item.gold}}银元</text>
					</view>
				</view>

				<view class="btn button" @click="sureshow  = true">立即提升</view>
				<p class="sheng">当前剩余 <text>{{userinfo.silver}}</text> 银元 </p>
			</view>

		

		

			
		</view>

		<!-- 确定开宝箱弹窗 -->
		<u-mask :show="sureshow">
			<view class="warp">
				<view class="surebox">
					<view class="m_tit">确认提升</view>
					<view class="m_con">是否消耗 <text>{{tablist[stat-1].gold}}银元</text> 提升{{tablist[stat-1].num}}幸运值？</view>
					<view class="m_btn">
						<view class="button cancel" @click="sureshow = false">取消</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" @click="upLucky(tablist[stat-1].gold)" class="button confirm" >提升</u-button>
					</view>
				</view>
			</view>
		</u-mask>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: 'transparent',
				},
				tablist:[
					{
						id:1,
						num:10,
						gold:1,
					},
					{
						id:2,
						num:100,
						gold:10,
					},
					{
						id:3,
						num:1000,
						gold:100,
					},
				],
				stat:1,
				userinfo: uni.getStorageSync('userinfo'),
				sureshow:false,
			};
		},
		onLoad(){
			this.getUserInfo();
		},

		methods: {
			change(id) {
				this.stat = id

			},
			// 获取个人信息
			getUserInfo(){
				this.$getUserInfo.getUserInfo((res)=>{
					if(res.code == 1) {
						this.userinfo = res.data
					}
				})
			},	

			async upLucky(num){
				let res = await this.$http.index.upLucky({
					num:num
				})
				this.$u.toast(res.msg)
				if(res.code == 1) {
					this.getUserInfo();
					this.sureshow = false
				}
			},

		},
	}
</script>

<style lang="less">
.zone {
	background: linear-gradient(180deg, #00684B 0%, rgba(0,106,74,0) 30%) #171A1F;
	background-size: 100% 100%;
	min-height: 100vh;
}

.nav-bar2 {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 60px;
	padding: 0px 10px;
}
	.n_left {
		width: 100%;
		display: flex;
		align-items: center;

		h3 {
			color: #fff;
			font-size: 25px;
		}
		text {
			position: absolute;
			right: 10px;
			color: rgba(255, 255, 255, 0.8);
			font-size: 12px;
			margin-left: 5px;
		}
		image {
				width: 35%;
				margin-left: 5px;
			}
	}

	.shouxu {
		color: #fff;
		font-size: 14px;
	}


.main {
	padding: 10px;

	h3 {
		color: #fff;
		font-size: 16px;
		line-height: 22px;
		text-align: center;
		margin: 10px 0;
	}
}


.titimg {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;

	image {
		width: 40%;
	}

	p {
		color: #FFFFFF;
		font-size: 13px;
		margin-top: 10px;
	}
}


.topbox {
	width: 100%;
	background: rgba(0, 103, 75, 0.51);
	border-radius: 18px;
	padding: 10px;
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.word {
		display: flex;
		flex-direction: column;

		text:nth-child(1) {
			font-size: 36px;
			font-weight: bold;
			color: #fff;
			line-height: 48px;
			text-shadow: 0px 2px 4px rgba(60,135,8,0.2);
			background: linear-gradient(180deg, #ABFF09 0%, #FCFF99 39%, #FFFFFF 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		text:nth-child(2) {
			color: #fff;
			font-size: 14px;
			font-weight: 600;
		}
	}

	image {
		width: 30%;
	}
}

.botbox {
	background: rgba(0, 103, 75, 0.51);
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
	border-radius: 18px;
	padding: 15px;
	margin-top: 10px;

	.title {
		color: #FFFFFF;
		font-size: 20px;
		font-weight: 600;
		text-align: center;
	}


}



.line {
	width: 100%;
	height: 1px;
	background: rgba(255, 255, 255, 0.1);
	margin: 20px 0;
}

.tab {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}

.option {
	width: 30%;
	background: #FFFFFF;
	border-radius: 5px;
	padding: 10px;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;

	text:nth-child(1) {
		color: #333333;
		font-size: 12px;

		span {
			font-size: 14px;
			font-weight: 600;
		}
	}

	text:nth-child(2) {
		color: #333333;
		font-size: 12px;
		zoom: 0.9;
	}
}

.active {
	background: #FFFFFF linear-gradient(180deg, #ABFF09 0%, #FCFF99 39%, #FFFFFF 100%);
	border-radius: 5px;
}

.btn {
	width: 80%;
	height: 55px;
	background: url('http://img.cpgm.cc/panda/static/public/btn3.png');
	background-size: 100% 100%;
	margin: 0 auto;
	margin-top: 20px;
	border-radius: 5px;
	color: #B73800;
	font-weight: 600;
	font-size: 18px;
}

.sheng {
	margin-top: 20px;
	color: #fff;
	font-size: 13px;
	text-align: center;

	text {
		color: #fff;
		font-size: 16px;
		font-weight: 600;
	}
}



// 确定开宝箱
.surebox {
	background: linear-gradient(180deg, #61FBED 0%, #E4FDFC 31%, #F6FEEB 68%, #F5FEA8 100%);
	box-shadow: inset 5px 5px 45px 0px rgba(255,255,255,0.5), inset -5px -5px 45px 0px rgba(255,255,255,0.5), inset 0px 2px 0px 0px rgba(255,255,255,0.5);
	border-radius: 18px;
	padding: 20px;
}

.m_tit {
	color: #000000;
	text-align: center;
	font-size: 20px;
	font-weight: 600;
}

.m_con {
	color: #696969;
	font-weight: 600;
	text-align: center;
	margin: 30px 0;
	text {
		color: #000000;
	}
}

.m_btn {
	display: flex;
	align-items: center;
	justify-content: space-between;

	.button {
		width: 45%;
		height: 50px;
		font-size: 18px;
		font-weight: 600;
	}

	.cancel {
		background: #EAEAEA;
		box-shadow: inset 0px -5px 0px 0px rgba(0,0,0,0.3);
		border-radius: 5px;
		border: 1px solid #000000;
		color: #000000;
		font-size: 14px;
		font-weight: 600;
	}

	.confirm {
		background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
		background-size: 100% 100%;
		border-radius: 5px;
		color: #B73800;
	}
}






// 玩法说明弹窗





</style>
